import React, { Component } from 'react'
import "../Cate/Cate.less"
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actions,getCatelist,getGoodslist } from '../../store/modules/cate';


export class Cate extends Component {
  componentDidMount(){
    let {
      Cate:{
        reqgetcate,
        reqgetgoods
      }
    } = this.props;
    reqgetcate();
    reqgetgoods()
  }

  render() {
    let { catelist,goodslist,Cate:{changePage} } = this.props;
    return (
      <div className='cate-con'>
        <div className='left'>
          {catelist.map((item)=>{
            return(
              <p key={item.id} onClick={()=>changePage(item.id)}>{item.catename}</p>
            )
          })}
        </div>
        <div className='right'>
          {goodslist.map((item)=>{
            return(
                <div key={item.id} className='box' onClick={()=>this.props.history.push("/detail?id="+item.id+"&type=1")} >
                <div className='imgbox'>
                  <img src={'http://localhost:1000'+item.img} alt="" />
                </div>
                <div>
                  <p>{item.catename}</p>
                  <p>{item.price}</p>
                  <div>加入购物车</div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}
const mapStateToProps = (state)=>({
  catelist:getCatelist(state),
  goodslist:getGoodslist(state)
})
const mapDispatchToProps = (dispatch) =>{
  return{
    Cate:bindActionCreators(actions,dispatch),
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Cate)